<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>黑马面面</title>
    <meta name="description" content="黑马面面">
    <meta name="keywords" content="黑马面面">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../css/element-ui.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
</head>

<body class="hold-transition">
<div id="app">
    <!--上面-->
    <div class="content-header common-search-border1">
        <el-button class="butAdd" @click="handleCreate"><i class="fa fa-plus" aria-hidden="true"></i> 新增试题
        </el-button>
    </div>

    <!--下面-->
    <div class="app-container">
        <!--空一行好看-->
        <div class="box common-search-border2">
        </div>
        <!--试卷内容-->
        <div class="box common-table-border" style="margin:8px 0 0;">
            <el-table :data="items" fit highlight-current-row style="width: 100%;">
                <el-table-column label="序号" align="center" width="50px">
                    <template slot-scope="scope">
                        <span>{{ scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="题库名字" align="center" width="250px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="录入时间" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.createDate | dateTransform }}
                    </template>
                </el-table-column>
                <el-table-column label="状态" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.isShow == 0 ? '禁用' : '已启用'}}
                    </template>
                </el-table-column>
                <el-table-column label="备注" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.remark}}
                    </template>
                </el-table-column>
                <!-- <el-table-column label="录入人" class-name="status-col">
                     <template slot-scope="scope">
                         <span>{{ scope.row.user_id }}</span>
                     </template>
                 </el-table-column>-->
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="400px">
                    <template slot-scope="scope">
                        <div class="operation">
                            <el-button type="primary" size="mini" @click="handlePreview(scope.row)"><i
                                    class="fa fa-superpowers"
                                    aria-hidden="true"></i> 查看
                            </el-button>
                            <el-button-group>
                                <el-button type="danger" size="mini" @click="handleClose(scope.row)"
                                           v-if="scope.row.isShow"><i
                                        class="el-icon-switch-button"
                                        aria-hidden="true"></i> 下架
                                </el-button>
                                <el-button size="mini" type="primary" @click="handleOpen(scope.row)" v-else>
                                    <i class="fa fa-pencil-square-o" aria-hidden="true"></i>启用
                                </el-button>
                            </el-button-group>
                            <el-button size="mini" type="danger" @click="handleDeleted(scope.row)"><i
                                    class="fa fa-trash-o" aria-hidden="true"></i>
                                删除
                            </el-button>

                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <div class="pagination-container">
                <el-pagination
                        class="pagiantion"
                        v-show="pagination.total>0"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pagination.currentPage"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="pagination.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pagination.total">
                </el-pagination>
            </div>
        </div>
    </div>

    <!--新增题库弹窗-->
    <el-dialog title="新增用户" align="center" :visible.sync="dialogFormVisible" width="40%" top="8vh">
        <el-form label-width="120px" :model="form" ref="form">
            <el-form-item label="试卷名称：">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="备注：" prop="remark">
                <el-input v-model="form.remark" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="handleCreateCancel">取 消</el-button>
            <el-button type="primary" @click="handleCreateConfirm">确 定</el-button>
        </div>
    </el-dialog>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../js/element-ui.js"></script>
<script src="../js/base.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                dialogFormVisible: false,
                form: {
                    userName: '123',
                    mail: '',
                    pwd: '',
                    rePwd: '',
                    remark: ''
                },
                pagination: {
                    total: 0,
                    currentPage: 1,
                    pageSize: 10
                },
                loading: false,
                items: [],
                baseData: base,
                requestParameters: {
                    courseId: '',
                    difficulty: '',
                    type: '',
                    keyWord: ''
                },
                courses: [],
                is_classic: 0
            }
        },
        created() {
            // 学科下拉列表
            this.initCourses();
            // 试题分页列表
            this.getList();
        },
        /*    filters: {
                typeTransform: (type, types) => {
                    let item = types.find(val => {
                        return val.id === type;
                    });
                    if (!item) {
                        return '';
                    }
                    return item.value;
                },
                dateTransform: (value) => {
                    let index = value.lastIndexOf('.');
                    return value.substr(0, index);
                },
                difficultyTransform: (difficulty, difficultys) => {
                    let item = difficultys.find(val => {
                        return val.id === difficulty;
                    });
                    if (!item) {
                        return '';
                    }
                    return item.value;
                }
            },*/
        methods: {
            //设置成启用
            handleOpen(row) {
                axios.post('/course/EnableStatus.do?id=' + row.id).then(res => {
                    //返回信息
                    this.$message({
                        message: res.data.message,
                        type: res.data.flag ? "success" : "error"
                    });
                    //刷新列表
                    this.getList();
                })
            },

            //设置成禁用
            handleClose(row) {
                axios.post('/course/DisableStatus.do?id=' + row.id).then(res => {
                    //返回信息
                    this.$message({
                        message: res.data.message,
                        type: res.data.flag ? "success" : "error"
                    });
                    //刷新列表
                    this.getList();
                })
            },
            // 学科下拉列表
            initCourses() {
                let t = this;

                // 必传参数
                let params = {
                    status: 0
                };
                console.log("学科下拉列表请求参数：" + JSON.stringify(params));
                //console.log(params);

                /*                axios.get('/course/findAll.do').then(response => {
                                    if (response.data.flag) {
                                        t.courses = response.data.result;
                                        console.log(t.courses);
                                    } else {
                                        this.$message.error(response.data.message);
                                    }
                                });*/


            },
            // 试题分页列表
            getList() {
                let t = this;

                // 必传参数
                let params = {
                    currentPage: t.pagination.currentPage,
                    pageSize: t.pagination.pageSize
                };
                // 选传参数
                let queryParams = {};
                let courseId = t.requestParameters.courseId;
                if (courseId !== '') {
                    queryParams.courseId = courseId;
                }
                let difficulty = t.requestParameters.difficulty;
                if (difficulty !== '') {
                    queryParams.difficulty = difficulty;
                }
                let type = t.requestParameters.type;
                if (type !== '') {
                    queryParams.type = type;
                }
                let keyWord = t.requestParameters.keyWord;
                if (keyWord !== '') {
                    queryParams.keyWord = keyWord;
                }
                if (Object.keys(queryParams).length) {
                    params.queryParams = queryParams;
                }
                console.log("基础题库列表请求参数：" + JSON.stringify(params));

                /*axios.post('/question/findListByPage.do', params).then(response => {
                    if (response.data.flag) {
                        t.pagination.total = response.data.result.total; //给总数量赋值
                        console.log(t.pagination.total);
                        t.items = response.data.result.rows;  //给列表List赋值
                        t.loading = true;
                    } else {
                        this.$message.error(response.data.message);
                    }
                });*/
                console.log(this.pagination);
                axios.post('/course/findPage.do', this.pagination).then(response => {
                    if (response.data.flag) {
                        t.pagination.total = response.data.result.total; //给总数量赋值
                        t.items = response.data.result.records;  //给列表List赋值
                        t.loading = true;
                    } else {
                        this.$message.error(response.data.message);
                    }
                });


            },
            //清除
            handleRest() {
                if (this.$refs['requestParameters']) {
                    this.$refs['requestParameters'].resetFields();
                }
            },
            //搜索
            handleSearch() {
                this.getList();
            },
            //分页
            handleSizeChange(val) {
                this.pagination.pageSize = val;
                this.pagination.currentPage = 1;
                this.getList();
            },
            //分页
            handleCurrentChange(val) {
                this.pagination.currentPage = val;
                this.getList();
            },
            // 新增试题
            handleCreate() {
                if (this.$refs['form']) {
                    this.$refs['form'].resetFields();
                }
                this.dialogFormVisible = true;
            },
            //新增用户取消
            handleCreateCancel() {
                this.dialogFormVisible = false;
            },
            //新增用户确定(完成)
            handleCreateConfirm() {
                axios.post('/course/add.do', this.form).then(res => {
                    //返回信息
                    this.$message({
                        message: res.data.message,
                        type: res.data.flag ? "success" : "error"
                    });
                    if (res.data.flag) {
                        // 关闭新增的窗口
                        this.dialogFormVisible = false;
                        // 刷新列表
                        this.getList();
                    }
                })
            },
            // 预览试题
            handlePreview(row) {
                /*window.location.href = "questionEditor.html?questionId=" + row.id + "&is_classic=" + this.is_classic +
                    "&is_examine=0";*/
                window.location.href = "questionEditor-tea.html";
            },
            // 修改试题
            handleUpdate(row) {
                window.location.href = "questionEditor.html?questionId=" + row.id + "&is_classic=" + this.is_classic;
            },
            // 删除试题
            handleDeleted(row) {
                this.$confirm('此操作将永久删除试题 ' + ', 是否继续?', '提示', {
                    type: 'warning'
                }).then(() => {
                    axios.post('/course/delete.do?id=' + row.id).then(res => {
                        //返回信息
                        this.$message({
                            message: res.data.message,
                            type: res.data.flag ? "success" : "error"
                        });
                        //成功就刷新
                        if (res.data.flag) {
                            // 刷新列表
                            this.getList();
                        }
                    })
                }).catch(() => {
                    this.$message.info('已取消操作!');
                });
            },
            // 试题加入精选
            handleClassic(row) {
                this.$confirm('此操作将试题加入精选 ' + ', 是否继续?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.$message.success("加入成功");
                    this.getList();
                }).catch(() => {
                    this.$message.info('已取消操作!');
                });
            }
        }
    })
</script>
</html>
